<template>
  <view class="">
    <view class="indexeditlist">
      <view class="indexedititem">
        <text>标题</text>
        <input v-model="title" type="text" placeholder="请输入标题" />
      </view>
      <!-- 选择卡类型 -->
      <view class="cardtypeitem">
        <text>请选择卡类型:</text>
        <u-radio-group @change="radioGroupChange" v-model="cardtype">
          <u-radio
            :icon-size="40"
            v-for="(item, index) in cardtypelist"
            :key="index"
            :name="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <view class="indexedititem">
        <text>手机号:</text>
        <input v-model="phonenumber" type="number" placeholder="请输入手机号" />
      </view>
      <view class="indexedititem">
        <text>售卖金额/月:</text>
        <input v-model="salemoney" type="number" placeholder="请输入售卖金额" />
      </view>
      <view class="indexedititem">
        <text>押金:</text>
        <input v-model="yajin" type="number" placeholder="请输入押金" />
      </view>

      <view class="indexedititem">
        <text>出售折扣:</text>
        <input v-model="zhekou" type="number" placeholder="请输入出售折扣" />
      </view>
      <view class="indexedititem">
        <text>描述:</text>
        <input v-model="desc" type="text" placeholder="请输入描述" />
      </view>
      <!-- 如果是租赁卡 -->
      <view v-if="cardtype == 2" class="indexedititem">
        <text>可租赁数量:</text>
        <input v-model="rentnum" type="text" placeholder="请输入可租赁数量" />
      </view>
      <view v-if="cardtype == 2" class="cardtypeitem">
        <text>请选择使用限制:</text>
        <u-radio-group @change="radioGroupChange3" v-model="cardlimit">
          <u-radio
            :icon-size="40"
            v-for="(item, index) in cardlimitlist"
            :key="index"
            :name="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <view v-if="cardtype == 2" class="flex">
        <text>开始时间:</text>
        <view class="example-body">
          <uni-datetime-picker
            placeholder="请选择开始时间"
            v-model="starttime"
          />
        </view>
      </view>
      <view v-if="cardtype == 2" class="flex">
        <text>截止时间:</text>
        <uni-datetime-picker placeholder="请选择截止时间" v-model="endtime" />
      </view>

      <!-- 启用停用状态 -->
      <view class="cardtypeitem">
        <text>请选择状态:</text>
        <u-radio-group @change="radioGroupChangeStatus" v-model="status">
          <u-radio
            :icon-size="40"
            v-for="(item, index) in statuslist"
            :key="index"
            :name="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <view class="indexbtn" @click="handleEdit"> 提交 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",

      // 开始时间
      starttime: "",
      //   截止时间
      endtime: "",
      // 标题
      title: "",
      // 手机号
      phonenumber: "",
      // 售卖金额
      salemoney: "",
      // 押金
      yajin: "",
      // 折扣
      zhekou: 0.8,
      // 描述
      desc: "",
      // 可租赁数量
      rentnum: 3,

      show: false,
      time: "",
      // 会员卡类型
      cardtype: 1,
      //  会员卡类型数组
      cardtypelist: [
        {
          value: 1,
          name: "打折卡",
          disabled: false,
        },
        {
          value: 2,
          name: "租赁卡",
          disabled: false,
        },
      ],
      //   卡是否启用状态
      vipcardtype: 0,
      //  会员卡类型数组
      vipcardtypelist: [
        {
          value: 0,
          name: "启用",
          disabled: false,
        },
        {
          value: 1,
          name: "停用",
          disabled: false,
        },
      ],
      //   使用限制
      cardlimit: 1,
      cardlimitlist: [
        {
          value: 1,
          name: "199",
          disabled: false,
        },
        {
          value: 2,
          name: "399",
          disabled: false,
        },
        {
          value: 3,
          name: "599",
          disabled: false,
        },
      ],
      //   启用/停用
      status: 1,
      statuslist: [
        {
          value: 1,
          name: "启用",
          disabled: false,
        },
        {
          value: 0,
          name: "停用",
          disabled: false,
        },
      ],
    };
  },
  watch: {
    datetimesingle(newval) {
      console.log("单选:", this.datetimesingle);
    },
  },
  methods: {
    // 开始时间改变
    change(e) {
      this.startttime = e;
      console.log("-change事件:", e);
    },
    //   卡类型改变事件
    radioGroupChange(cardtype) {
      console.log(cardtype);
    },
    radioGroupChange2(vipcardtype) {
      console.log(vipcardtype);
    },
    radioGroupChange3(cardlimit) {
      console.log(cardlimit);
    },
    radioGroupChangeStatus(status) {
      console.log(status);
    },
    // 修改卡
    handleEdit() {
      console.log("修改卡");

      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.user_card_hand/edit", //仅为示例，并非真实接口地址。
        data: {
          id: this.id,
          title: this.title,
          type: this.cardtype,
          mobile: this.phonenumber,
          money: this.salemoney,
          deposit: this.yajin,
          sale_discount: this.zhekou,
          starttime: this.starttime,
          endtime: this.endtime,
          astrict: this.cardlimit,
          status: this.status,
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 0) {
            uni.showToast({
              title: res.data.msg,
              icon: "error",
              duration: 2000,
            });
          } else if (res.data.code == 1) {
            uni.showToast({
              title: res.data.msg,
              icon: "success",
              duration: 1500,
            });
            // 返回主页
            uni.navigateBack({
              url: "../vipcard/vipcard",
            });
          }
        },
      });
    },
    // 根据id获取列表信息
    getVipCardList() {
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.user_card_hand/edit", //仅为示例，并非真实接口地址。
        data: {
          id: this.id,
        },
        method: "GET",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 1) {
            console.log(res.data.data);
            this.title = res.data.data.titile;
            this.cardtype = res.data.data.type;
            this.phonenumber = res.data.data.mobile;
            this.salemoney = res.data.data.money;
            this.yajin = res.data.data.deposit;
            this.zhekou = res.data.data.sale_discount;
            this.starttime = res.data.data.starttime_text;
            this.endtime = res.data.data.endtime_text;
            this.cardlimit = res.data.data.astrict;
          }
        },
      });
    },
  },
  onLoad(option) {
    console.log(option.id);
    this.id = option.id;
    console.log(this.id);
  },
  mounted() {
    this.getVipCardList();
  },
};
</script>

<style>
.indexeditlist {
  width: 90%;
  margin: 4% 5%;
}
.indexedititem {
  border-bottom: 1px solid #e6e6e6;
  padding: 5% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.indexedititem text {
  width: 160rpx;
  color: #313131;
}
.indexedititem input {
  font-size: 28rpx;
  width: 500rpx;
  color: #828282;
  text-align: right;
}
.indexbtn {
  width: 80%;
  margin: 2% 10%;
  text-align: center;
  background: red;
  font-size: 32rpx;
  line-height: 3;
  color: #fff;
  border-radius: 60rpx;
  margin-top: 100rpx;
}
.cardtypeitem {
  border-bottom: 1px solid #e6e6e6;
  padding: 5% 0;
  display: flex;
  justify-content: space-between;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5% 0;

  border-bottom: 1px solid #e6e6e6;
}
</style>
